<!--
 * @Author: your name
 * @Date: 2021-08-25 09:52:30
 * @LastEditTime: 2021-10-18 22:02:14
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\layouts\useSilderMenu.vue
-->

<script lang="tsx">
import { defineComponent, unref, computed, reactive } from "vue";
import Vlink from "./link.vue";
import { Menu } from "ant-design-vue";
import { setTrigter } from "../setting/menuTrigger";
import i18n from "../setting/locales/setlocales";
import { SetTheme } from "../setting/theme";
const { t } = i18n.global;
type initContentMenu = typeof ContentMenu;
//在外定义强制类型属性 路由跳转也是 使用该组件
// 不要在props 中使用强类型约束 可以在 实参位置使用
//使用 Vlink 跳转
const props = {
  items: { type: Array },
};
export default defineComponent({
  name: "SilderMenu",
  props,
  components: {
    Vlink,
  },
  setup(props) {
    // 主题
    let { themeColors } = SetTheme();
    // 响应式主题配置
    const getHeaderClass = computed(() => {
      const theme = unref(themeColors);
      return `primary-${theme}-text-color`;
    });
    const getmenuClass = computed(() => {
      const theme = unref(themeColors);
      return `primary-${theme}-menu-color`;
    });
    let { menuTriggers } = setTrigter();
    const getTriggersStatus = computed(() => {
      const status = unref(menuTriggers);
      return status;
    });
    //   这里只适合二级菜单 如果有三级联动的需求可以递归renderMenu实现
    const TitleContent = (props) => {
      let isShow = props.isShow;
      return (
        <div class={["titles", getHeaderClass.value]}>
          <span>
            <svg-icon icon-class={props.icon} size="1.1"></svg-icon>
          </span>
          <span class={isShow ? "" : "active"}>{t(props.title)}</span>
        </div>
      );
    };
    // 递归组件
    function renderMenu(items: initContentMenu[]) {
      return items.map((item) => {
        let { children, name, mate } = item;
        // 如果redirect为空字符串 和 有子集说明是下拉列表
        // 因为antdisgens基于 ts 所以需要配合ts使用 原生使用无法使用

        if (!item.redirect && children.length > 0) {
          let show = getTriggersStatus.value;
          // 控制标题显示隐藏
          return (
            <>
              <Menu.SubMenu
                key={item.name}
                popupClassName={`context-menu__popup`}
              >
                {{
                  title: () => (
                    <TitleContent {...mate} icon={item.icon} isShow={show} />
                  ),
                  default: () => renderMenu(children),
                }}
              </Menu.SubMenu>
            </>
          );
        } else {
          let show = getTriggersStatus.value;
          return (
            <>
              <Menu.Item
                key={item.name}
                class={["menuitem", getHeaderClass.value, getmenuClass.value]}
              >
                <Vlink
                  urldata={item}
                  url={item.mate.router}
                  isShow={show}
                ></Vlink>
              </Menu.Item>
            </>
          );
        }
      });
    }
    return () => {
      var { items } = props;
      return <>{renderMenu(items)}</>;
    };
  },
});
</script>
<style lang="less">
@import "../styles/commit.less";
.ant-menu-item {
  margin: 0 !important;
}
.menuitem {
  display: flex;
}
.titles {
  display: flex;
  align-items: center;

  span {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    &:nth-of-type(2) {
      margin-left: 30px;
      display: flex;
      align-items: center;
      opacity: 1;
      transition: all 0.2s ease-in 0s;
      &.active {
        margin-left: 0;
        opacity: 1;
      }
    }
  }
}
.items {
  display: flex;
  align-items: center;
  span {
    
  }
}
</style>
